<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="角色名称(添加角色):">
      <el-input v-model="form.rname"></el-input>
    </el-form-item>
    <el-form-item label="角色名称选择(选择了就是修改角色)">
    <el-select v-model="form.rname" placeholder="名称选择(选择了就是修改角色)">
      <el-option v-for="m in js" :key="m.rid" :label="m.rname" :value="m.rname"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="权限选择:">
      <div class="block">
        <el-cascader
          v-model="sz"
          :options="options"
          :props="{
            multiple: true,
            checkStrictly: true,
            value: 'mid',
            label: 'mname',
          }"
          clearable
        ></el-cascader>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">编辑</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        rname: "",
        menuids: [],
      },
      sz: [],
      options: [],
      js:[],
      token: sessionStorage.getItem("token"),
    };
  },
  mounted() {
    var my = this;
    this.$axios
      .get("http://localhost:5230/api/item1/Getmenu")
      .then(function (s) {
        my.options = s.data.mod;
      });
    this.$axios
      .get(this.$apiurl.apiurl+"Getrole")
      .then(function (s) {
        my.js = s.data.modlist;
      });
  },
  methods: {
    onSubmit() {
      var my = this;
      alert(my.form.rname)
      this.sz.forEach((m) => {
        m.forEach((s) => {
          if (my.form.menuids.indexOf(s) < 0) {
            my.form.menuids.push(Number(s));
          }
        });
      });
      this.$axios
        .post("http://localhost:5230/api/item1/Postupdrole", my.form)
        .then(function (h) {
          if (h.data.h > 0) {
            alert("编辑成功");
            my.$router.push("/");
          } else {
            alert("编辑失败");
          }
        });
    },
  },
};
</script>